<template>
  <div class="GdwyyAppIncome">
    <GdwyyAppBigTitle
      title="营服收入"
      icon="zl/icon_yfsr"
      color="red"
      :customTips="`账期：${topData.SOURCE_MONTH || ''}`"
    ></GdwyyAppBigTitle>
    <van-loading v-if="loading" type="spinner" color="#1989fa" />
    <template v-else>
      <div class="main" v-for="(item, index) in dataList" :key="index + 'sr'">
        <GdwyyAppSmallTitle :title="item.title" dwText="元"></GdwyyAppSmallTitle>

        <div class="top-box flex flex-between" v-for="(ite, ind) in desList" :key="ind + 'des'">
          <div class="left flex flex-center">
            <img
              class="icon"
              :src="require('../../../../../assets/imgs/reconsitution/zl/' + `${item.target}_${ite.target}` + '.png')"
            />
            <div>
              <div class="font-12 color666">{{ ite.label }}</div>
              <div class="font-20 color333">
                {{ topData[item[ite.sr]] == '--' ? '--' : Number(topData[item[ite.sr]] || 0).toLocaleString() }}/0
              </div>
              <div v-if="item.target === 'qdwdqlsr'">
                <img
                  class="icon-wcl"
                  :src="require('../../../../../assets/imgs/reconsitution/zl/' + 'icon_wcl' + '.png')"
                />
                <span class="font-12 color666 text-wcl">完成率</span>
                <span class="font-15 color333">0%</span>
              </div>
            </div>
          </div>
          <div class="right">
            <template v-if="item.target === 'rhftsr'">
              <img
                class="icon-wcl"
                :src="require('../../../../../assets/imgs/reconsitution/zl/' + 'icon_wcl' + '.png')"
              />
              <span class="font-12 color666 text-wcl">完成率</span>
              <span class="font-15 color333">0%</span>
            </template>
            <template v-if="item.target === 'qdwdqlsr'">
              <div>
                <img
                  class="icon-wcl"
                  :src="require('../../../../../assets/imgs/reconsitution/zl/' + 'icon_wcl' + '.png')"
                />
                <span class="font-12 color666 text-wcl">移网</span>
                <span class="font-15 color333">{{ Number(topData[item[ite.yw]] || 0).toLocaleString() }}</span>
              </div>
              <div>
                <img
                  class="icon-wcl"
                  :src="require('../../../../../assets/imgs/reconsitution/zl/' + 'icon_wcl' + '.png')"
                />
                <span class="font-12 color666 text-wcl">宽带</span>
                <span class="font-15 color333">{{ Number(topData[item[ite.kd]] || 0).toLocaleString() }}</span>
              </div>
            </template>
          </div>
        </div>

        <div class="flex flex-between fill-w">
          <div class="font-14 circle-title">趋势分析</div>
          <div class="font-12 color999">单位：元</div>
        </div>

        <van-loading v-if="item.loading" type="spinner" color="#1989fa" />
        <div v-show="!item.loading" class="fill-w echarts-box" :id="item.target + '-echarts'"></div>

        <div class="flex flex-between fill-w mgt">
          <div class="font-14 circle-title">{{ item.jgConfig.title }}</div>
          <div class="font-12 color999">单位：元</div>
        </div>
        <div class="jg-box">
          <div class="item-box" v-for="(ite, inde) in item.jgConfig.list" :key="inde + 'jg'">
            <div class="item-top flex-between fill-w">
              <div class="font-12 color666">{{ ite }}</div>
              <div class="color333 font-15">{{ topData[item.jgConfig.listModel[inde]] || 0 }}</div>
            </div>
            <div class="item-bottom fill-w flex-center">
              <div
                class="progress"
                :style="{
                  width:
                    topData[item.jgConfig.listModel[inde]] && xnjkTotal !== ''
                      ? (topData[item.jgConfig.listModel[inde]] / xnjkTotal).toFixed(2) * 100 + '%'
                      : '0%',
                }"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { GdwyyAppBigTitle, GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
import * as initEcharts from './echarts'
import moment from 'moment'

const _apiConfig = [
  {
    url: '2c3a07178ba92724018c14eb2996002e',
    resultParamsName: 'topData',
    loading: 'loading',
  },
  // 融合Echarts
  {
    url: '2c3a07178ba92724018c14e2fa90002d',
    requestPostHook: 'rhrequestPostHook',
    dataType: 'Array',
    loading: 'rhftsrLoading',
  },
  // 渠道Echarts
  {
    url: '2c3a07178ba92724018c14dec4f8002c',
    requestPostHook: 'qdrequestPostHook',
    dataType: 'Array',
    loading: 'qdwdqlsrLoading',
  },
]
export default {
  name: 'GdwyyAppIncome',
  mixins: [reconsitutionMixin],
  components: {
    GdwyyAppBigTitle,
    GdwyyAppSmallTitle,
  },
  data() {
    return {
      loading: false,
      queryParam: {
        gridId: '',
        dayId: '',
      },
      topData: {},
      desList: [
        {
          label: '月收入/月目标',
          sr: 'ysr',
          mb: 'ymb',
          target: 'ysr',
          yw: 'yyw',
          kd: 'ykd',
        },
        {
          label: '年累计收入/年累计目标',
          sr: 'nsr',
          mb: 'nmb',
          target: 'nsr',
          yw: 'nyw',
          kd: 'nkd',
        },
      ],
      // dataList: ,
      xnjkTotal: 1000000,
      qdwdqlsrLoading: false,
      rhftsrLoading: false,
    }
  },

  computed: {
    dataList() {
      return [
        {
          title: '融合分摊收入',
          target: 'rhftsr',
          ysr: 'RH_SHARE_INCOME',
          ymb: '',
          nsr: 'RH_SHARE_INCOME_YEAR',
          nmb: '',
          jgConfig: {
            title: '融合分摊收入业务结构',
            list: ['分摊后移网侧出账收入', '分摊后宽带侧出账收入', '智家增值出账收入', '智家一次性收入'],
            listModel: ['YW_INCOME', 'KD_INCOME', 'ZJ_ZZ_INCOME', 'ZJ_ONCE_INCOME'],
          },
          loading: this.rhftsrLoading,
        },
        {
          title: '渠道维度全量收入',
          target: 'qdwdqlsr',
          ysr: 'ALL_USER_YW_INCOME',
          ymb: '',
          nsr: 'ALL_USER_YW_INCOME_YEAR',
          nmb: '',
          yyw: 'YW_CUR_INCOME_M',
          ykd: 'KD_CUR_INCOME_M',
          nyw: 'YW_CUR_INCOME',
          nkd: 'KD_CUR_INCOME',
          jgConfig: {
            title: '收入结构',
            list: ['移网', '宽带'],
            listModel: ['YW_CUR_INCOME_M', 'KD_CUR_INCOME_M'],
          },
          loading: this.qdwdqlsrLoading,
        },
      ]
    },
  },

  created() {
    const that = this
    that.initData()

    function main(e) {
      // that.loading = true
      if (e.key === '$dialogFinish' && e.newValue) {
        localStorage.setItem('$dialogFinish', '')
        that.queryParam.gridId = localStorage.getItem('$gridId')
        that.initDataPostHook()
        // setAllRequest(_apiConfig, { ...queryParam, gridId: localStorage.getItem('$gridId') })
      }
    }
    window.addEventListener('storage', main)
  },

  methods: {
    initDataPostHook(data) {
      const params = {
        ...this.queryParam,
        monthId: moment(this.queryParam.dayId, 'YYYYMMDD').subtract(1, 'month').format('YYYYMM'),
      }
      delete params.dayId
      this.setAllRequest(_apiConfig, params)
    },
    renderEcharts(data, type, { yearModel, lastYearModel }) {
      const x = [],
        year = [],
        lastYear = []
      for (const item of data) {
        x.push(item.month)
        if (item.month < moment(this.dayId, 'YYYYMMDD').format('YYYYMM')) {
          year.push(item[yearModel])
        }
        lastYear.push(item[lastYearModel])
      }
      this.$nextTick(() => {
        initEcharts[type + 'Echarts']({
          tagId: type + '-echarts',
          data: {
            x,
            year,
            lastYear,
          },
        })
      })
    },
    rhrequestPostHook(data) {
      this.rhftsrLoading = this.loading = false
      this.renderEcharts(data, 'rhftsr', { yearModel: 'RH_SHARE_INCOME', lastYearModel: 'RH_SHARE_INCOME_LAST_YEAR' })
    },
    qdrequestPostHook(data) {
      this.qdwdqlsrLoading = this.loading = false
      this.renderEcharts(data, 'qdwdqlsr', {
        yearModel: 'all_user_yw_income_year',
        lastYearModel: 'all_user_yw_income_last_year',
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.GdwyyAppIncome {
  margin-bottom: 3.2vw;
  ::v-deep {
    .small-title::before {
      background: #fd806e;
    }
  }
  .main {
    padding: 0 4vw;
    box-sizing: border-box;
    background-color: #fff;
    padding-bottom: 1.2vw;
    .circle-title::before {
      border-color: #fd806e !important;
    }

    .top-box {
      margin-bottom: 4vw;
      .icon {
        width: 10.6667vw;
        height: 10.6667vw;
        margin-right: 2.6667vw;
      }
      .icon-wcl {
        width: 3.2vw;
        height: 3.2vw;
        margin-right: 1vw;
      }
      .text-wcl {
        margin-right: 3vw;
      }
      .right {
        align-self: flex-end;
        transform: translateY(-1.3333vw);
      }
    }

    .jg-box {
      .item-top {
        margin-bottom: 0.8vw;
      }
      .item-bottom {
        border: 0.2667vw dotted #ffa132;
        border-radius: 0.5333vw;
        height: 3.2vw;
        margin-bottom: 3.7333vw;
        .progress {
          background-image: linear-gradient(270deg, rgba(253, 128, 110, 0.8) 0%, rgba(253, 128, 110, 0) 99%);
          border-radius: 0.5333vw 26.6667vw 26.6667vw 0.5333vw;
          width: 30%;
          height: 1.0667vw;
        }
      }
    }
  }
  .echarts-box {
    height: 32vw;
  }
  .mgt {
    margin: 4vw 0;
  }
}
</style>